<template>
  <div class="business-management">
    <div class="page-header">
      <h1 class="page-title">业务管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="showAddDialog = true">
          <i class="fas fa-plus mr-2"></i>添加业务类型
        </el-button>
      </div>
    </div>

    <!-- 业务统计 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-briefcase text-blue-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalBusinessTypes }}</div>
          <div class="stat-label">业务类型</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-gavel text-green-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activeCases }}</div>
          <div class="stat-label">进行中案件</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-chart-line text-orange-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.monthlyRevenue }}</div>
          <div class="stat-label">本月收入(万元)</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users text-purple-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activeClients }}</div>
          <div class="stat-label">活跃客户</div>
        </div>
      </div>
    </div>

    <!-- 业务类型管理 -->
    <div class="business-types-section">
      <div class="section-header">
        <h2 class="section-title">业务类型管理</h2>
        <el-input
          v-model="searchQuery"
          placeholder="搜索业务类型"
          class="search-input"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
      </div>

      <div class="business-grid">
        <div 
          v-for="business in filteredBusinessTypes" 
          :key="business.id"
          class="business-card"
        >
          <div class="business-header">
            <div class="business-icon">
              <i :class="business.icon"></i>
            </div>
            <div class="business-info">
              <h3 class="business-name">{{ business.name }}</h3>
              <p class="business-description">{{ business.description }}</p>
            </div>
          </div>
          
          <div class="business-stats">
            <div class="stat-item">
              <span class="stat-label">案件数量</span>
              <span class="stat-value">{{ business.caseCount }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">收费标准</span>
              <span class="stat-value text-green-600">¥{{ business.fee.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">状态</span>
              <el-tag :type="business.status === 'active' ? 'success' : 'danger'">
                {{ business.status === 'active' ? '启用' : '停用' }}
              </el-tag>
            </div>
          </div>
          
          <div class="business-actions">
            <el-button size="small" type="primary" @click="editBusiness(business)">
              <i class="fas fa-edit mr-1"></i>编辑
            </el-button>
            <el-button 
              size="small" 
              :type="business.status === 'active' ? 'danger' : 'success'"
              @click="toggleBusinessStatus(business)"
            >
              {{ business.status === 'active' ? '停用' : '启用' }}
            </el-button>
            <el-button size="small" type="info" @click="viewBusinessDetails(business)">
              <i class="fas fa-eye mr-1"></i>详情
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 收费标准管理 -->
    <div class="pricing-section">
      <div class="section-header">
        <h2 class="section-title">收费标准管理</h2>
      </div>
      
      <div class="table-section">
        <el-table :data="pricingRules" style="width: 100%">
          <el-table-column prop="businessType" label="业务类型" width="150"></el-table-column>
          <el-table-column prop="serviceLevel" label="服务级别" width="120"></el-table-column>
          <el-table-column prop="basePrice" label="基础费用" width="120" align="center">
            <template #default="{ row }">
              <span class="text-green-600 font-semibold">¥{{ row.basePrice.toLocaleString() }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="additionalFee" label="附加费用" width="120" align="center">
            <template #default="{ row }">
              <span class="text-orange-600">¥{{ row.additionalFee.toLocaleString() }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="费用说明" min-width="200"></el-table-column>
          <el-table-column prop="effectiveDate" label="生效日期" width="120"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="editPricing(row)">
                <i class="fas fa-edit mr-1"></i>编辑
              </el-button>
              <el-button size="small" type="danger" @click="deletePricing(row)">
                <i class="fas fa-trash mr-1"></i>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加业务类型对话框 -->
    <el-dialog v-model="showAddDialog" title="添加业务类型" width="600px">
      <el-form :model="newBusiness" :rules="businessRules" ref="businessForm" label-width="100px">
        <el-form-item label="业务名称" prop="name">
          <el-input v-model="newBusiness.name" placeholder="请输入业务名称"></el-input>
        </el-form-item>
        <el-form-item label="业务描述" prop="description">
          <el-input 
            v-model="newBusiness.description" 
            type="textarea" 
            rows="3"
            placeholder="请输入业务描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="收费标准" prop="fee">
          <el-input-number 
            v-model="newBusiness.fee" 
            :min="0" 
            :step="100"
            controls-position="right"
            placeholder="请输入收费标准"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="业务图标" prop="icon">
          <el-select v-model="newBusiness.icon" placeholder="选择图标">
            <el-option label="法律咨询" value="fas fa-balance-scale"></el-option>
            <el-option label="合同纠纷" value="fas fa-file-contract"></el-option>
            <el-option label="交通事故" value="fas fa-car-crash"></el-option>
            <el-option label="劳动仲裁" value="fas fa-user-tie"></el-option>
            <el-option label="房产纠纷" value="fas fa-home"></el-option>
            <el-option label="婚姻家庭" value="fas fa-heart"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddBusiness">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'BusinessManagement',
  setup() {
    const router = useRouter()
    const searchQuery = ref('')
    const showAddDialog = ref(false)
    
    const stats = reactive({
      totalBusinessTypes: 8,
      activeCases: 186,
      monthlyRevenue: 125.6,
      activeClients: 1256
    })
    
    const businessTypes = ref([
      {
        id: 1,
        name: '机动车交通事故',
        description: '机动车之间、机动车与非机动车、行人发生的交通事故理赔及诉讼',
        icon: 'fas fa-car-crash text-red-500',
        caseCount: 68,
        fee: 8000,
        status: 'active'
      },
      {
        id: 2,
        name: '非机动车交通事故',
        description: '涉及电动车、自行车等非机动车的交通事故处理',
        icon: 'fas fa-bicycle text-blue-500',
        caseCount: 42,
        fee: 5000,
        status: 'active'
      },
      {
        id: 3,
        name: '人身损害赔偿',
        description: '交通事故造成的人身伤亡损害赔偿案件',
        icon: 'fas fa-user-injured text-orange-500',
        caseCount: 38,
        fee: 12000,
        status: 'active'
      },
      {
        id: 4,
        name: '财产损害赔偿',
        description: '交通事故造成的车辆及其他财产损失赔偿',
        icon: 'fas fa-coins text-green-500',
        caseCount: 26,
        fee: 4000,
        status: 'active'
      },
      {
        id: 5,
        name: '交通肇事刑事案件',
        description: '构成交通肇事罪的刑事案件辩护代理',
        icon: 'fas fa-gavel text-purple-500',
        caseCount: 12,
        fee: 15000,
        status: 'active'
      }
    ])
    
    const pricingRules = ref([
      {
        businessType: '机动车交通事故',
        serviceLevel: '基础咨询',
        basePrice: 2000,
        additionalFee: 0,
        description: '责任认定分析和基础法律咨询',
        effectiveDate: '2024-01-01'
      },
      {
        businessType: '机动车交通事故',
        serviceLevel: '理赔代理',
        basePrice: 8000,
        additionalFee: 1000,
        description: '保险理赔谈判和协议签署',
        effectiveDate: '2024-01-01'
      },
      {
        businessType: '机动车交通事故',
        serviceLevel: '诉讼代理',
        basePrice: 15000,
        additionalFee: 2000,
        description: '全程诉讼代理和庭审出庭',
        effectiveDate: '2024-01-01'
      },
      {
        businessType: '人身损害赔偿',
        serviceLevel: '伤残鉴定',
        basePrice: 3000,
        additionalFee: 500,
        description: '伤残等级鉴定申请和复核',
        effectiveDate: '2024-01-01'
      },
      {
        businessType: '人身损害赔偿',
        serviceLevel: '赔偿计算',
        basePrice: 5000,
        additionalFee: 1000,
        description: '损害赔偿金额计算和谈判',
        effectiveDate: '2024-01-01'
      },
      {
        businessType: '交通肇事刑事案件',
        serviceLevel: '刑事辩护',
        basePrice: 20000,
        additionalFee: 3000,
        description: '刑事案件辩护和量刑建议',
        effectiveDate: '2024-01-01'
      }
    ])
    
    const newBusiness = reactive({
      name: '',
      description: '',
      fee: 0,
      icon: ''
    })
    
    const businessRules = {
      name: [{ required: true, message: '请输入业务名称', trigger: 'blur' }],
      description: [{ required: true, message: '请输入业务描述', trigger: 'blur' }],
      fee: [{ required: true, message: '请输入收费标准', trigger: 'blur' }],
      icon: [{ required: true, message: '请选择业务图标', trigger: 'change' }]
    }
    
    const filteredBusinessTypes = computed(() => {
      return businessTypes.value.filter(business => 
        business.name.includes(searchQuery.value) ||
        business.description.includes(searchQuery.value)
      )
    })
    
    const editBusiness = (business) => {
      router.push(`/admin/business/edit/${business.id}`)
    }
    
    const toggleBusinessStatus = (business) => {
      business.status = business.status === 'active' ? 'inactive' : 'active'
      alert(`业务类型状态已更新`)
    }
    
    const viewBusinessDetails = (business) => {
      router.push(`/admin/business/detail/${business.id}`)
    }
    
    const editPricing = (pricing) => {
      alert(`编辑收费标准: ${pricing.businessType}`)
    }
    
    const deletePricing = (pricing) => {
      if (confirm(`确定要删除 ${pricing.businessType} 的收费标准吗？`)) {
        alert('删除成功')
      }
    }
    
    const handleAddBusiness = () => {
      alert('添加业务类型功能开发中...')
      showAddDialog.value = false
    }
    
    return {
      searchQuery,
      showAddDialog,
      stats,
      businessTypes,
      pricingRules,
      newBusiness,
      businessRules,
      filteredBusinessTypes,
      editBusiness,
      toggleBusinessStatus,
      viewBusinessDetails,
      editPricing,
      deletePricing,
      handleAddBusiness
    }
  }
}
</script>

<style scoped>
.business-management {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.business-types-section,
.pricing-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.search-input {
  width: 300px;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.business-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.business-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.business-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.business-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.business-info {
  flex: 1;
}

.business-name {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.business-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.business-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
  padding: 8px;
  background: white;
  border-radius: 6px;
}

.stat-item .stat-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-item .stat-value {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
}

.business-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.table-section {
  margin-top: 20px;
}
</style> 